<template>
  <el-select
    v-model="country"
    placeholder="请选择站点"
    size="small"
    class="query-select"
    @change="changeValue"
  >
    <el-option
      v-for="item in countryOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disable"
    >
      <span style="float: left;" v-if="item.icon"><img class="country-img" style="" :src="item.icon"/></span>
      <span style="float: left">{{ item.label }}</span>
    </el-option>
  </el-select>
</template>

<script>
import {getToken} from "@/utils/auth";
import {getTranslatorList} from "@/api/site";
import {getCountry} from "@/utils/common";
import {getSellerOrderNum} from "@/api/order";

export default {
  name: "SelectCountry",
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
  },
  watch: {
    value(val) {
      this.country = val;
    }
  },
  mounted() {
    this.country = this.value;
  },
  created() {
    this.getData();
    this.getSellerNum();
  },
  data() {
    return {
      country: '',
      countryOptions:[
        {label:'全部站点',value:'',icon:'',disable:false},
      ],
    }
  },
  methods: {
    // 获取数据
    getData(){
      const countries = getCountry();
      for (const country of countries) {
        this.countryOptions.push(country)
      }
    },
    // 获取当前每个站点未处理的订单数量
    getSellerNum(){
      getSellerOrderNum()
        .then(res=>{
          const {data} = res

        })
    },
    changeValue(){
      this.$emit('input',this.country)
      this.$emit('change', this.country);
    },
  }
}
</script>

<style scoped>
.country-img{
  display: inline;
  width: 20px;
  margin-top: 7px;
  margin-right: 10px;
}
</style>
